<template>
  <el-container>

    <el-row>
      <el-button
        icon="fa fa-fw fa-refresh"
        size="mini"
        type="info"
        @click="handleRefresh">
      </el-button>

      <el-button
        icon="fa fa-fw fa-plus"
        size="mini"
        type="primary"
        @click="handleAddItem">添加
      </el-button>

      <el-button
        icon="fa fa-fw fa-trash-o"
        size="mini"
        type="danger"
        @click="handleDelete">删除
      </el-button>

    </el-row>

    <el-table
      @selection-change="handleSelectionChange"
      :data="tableData"
      tooltip-effect="dark"
      border
      :default-sort="{prop: 'date', order: 'descending'}"
      :row-class-name="tableRowClassName"
      size="small">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>

      <el-table-column
        prop="name"
        width="120"
        label="模板名称">
      </el-table-column>

      <el-table-column
        prop="type"
        label="类型"
        width="80"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type == 0">普通</el-tag>
          <el-tag v-if="scope.row.type == 1">自定义</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="mon"
        label="星期一 (元)"
        width="100"
        tooltip-effect="dark">
      </el-table-column>

      <el-table-column
        prop="tue"
        label="星期二 (元)"
        width="100"
        tooltip-effect="dark">
      </el-table-column>

      <el-table-column
        prop="wed"
        label="星期三 (元)"
        width="100"
        tooltip-effect="dark">
      </el-table-column>

      <el-table-column
        prop="thu"
        label="星期四 (元)"
        width="100"
        tooltip-effect="dark">
      </el-table-column>

      <el-table-column
        prop="fri"
        label="星期五 (元)"
        width="100"
        tooltip-effect="dark">
      </el-table-column>

      <el-table-column
        prop="sat"
        label="星期六 (元)"
        width="100"
        tooltip-effect="dark">
      </el-table-column>

      <el-table-column
        prop="sun"
        label="星期天 (元)"
        width="100"
        tooltip-effect="dark">
      </el-table-column>

      <el-table-column
        prop="fixed_price"
        label="固定金额 (元)"
        width="110"
        tooltip-effect="dark">
      </el-table-column>

      <el-table-column
        prop="during"
        label="时段间隔 (分钟)"
        width="110"
        tooltip-effect="dark">
      </el-table-column>

      <el-table-column
        prop="content"
        label="根据时段配置的价格 (元)"
        tooltip-effect="dark">
        <template slot-scope="scope">
          <el-tag class="tag-item" v-if="scope.row.content.length>0" v-for="item in scope.row.content">时间：{{item.timed}}，价格：{{item.price}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="status"
        label="状态"
        width="80"
        show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
          <el-tag v-if="scope.row.status == 0" type="danger">停止</el-tag>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            circle
            icon="fa fa-fw fa-pencil"
            size="mini"
            type="primary"
            @click="handleEditItem (scope.$index, scope.row)">
          </el-button>

          <el-button
            circle
            icon="fa fa-fw fa-trash-o"
            size="mini"
            type="danger"
            @click="handleDeleteItem (scope.$index, scope.row)">
          </el-button>

          <el-button
            circle
            icon="fa fa-fw fa-toggle-on"
            size="mini"
            type="success"
            @click="handleStartUsingItem (scope.$index, scope.row)">
          </el-button>

          <el-button
            circle
            icon="fa fa-fw fa-toggle-off"
            size="mini"
            type="warning"
            @click="handleBlockUpItem (scope.$index, scope.row)">
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagination.currentPage"
      :page-sizes="pagination.pageSizes"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>

  </el-container>
</template>

<script>
  export default {
    mounted: function  () {
      this.getData ();
    },
    methods: {
      /**
       * 数据请求
       * */
      getData: function  () {
        let _this = this;
        this.api.getTimeRuleTabulation ({
          page: this.pagination.currentPage,
          paginate: this.pagination.pageSize
        }).then (function  (res) {
          if  (res.code == 1) {
            _this.tableData = res.data.data;
            _this.pagination.total = res.data.total;
          }
        }).catch (function  (res) {
          throw new Error (res);
        });
      },
      /**
       * 删除数据
       * */
      delData: function  ({id: ids}) {
        let _this = this;
        _this.api.delTimeRule ({id: ids}).then (function  (res) {
          if  (res.code == 1) {
            _this.getData ();
            _this.$message ({
              showClose: true,
              message: res.msg,
              type: 'success'
            });
          } else {
            _this.$message ({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch (function  (error) {
          throw new Error (error);
        });
      },
      /**
       * 启用数据
       * */
      startUsingData: function  ({id: ids}) {
        let _this = this;
        _this.api.updateTimeRuleStatus ({id: ids, status: 1}).then (function  (res) {
          if  (res.code == 1) {
            _this.getData ();
            _this.$message ({
              showClose: true,
              message: res.msg,
              type: 'success'
            });
          } else {
            _this.$message ({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch (function  (error) {
          throw new Error (error);
        });
      },
      /**
       * 停用数据
       * */
      blockUpData: function  ({id: ids}) {
        let _this = this;
        _this.api.updateTimeRuleStatus ({id: ids, status: 0}).then (function  (res) {
          if  (res.code == 1) {
            _this.BaseUtils.updateStatusByIds ({status: 0, idValue: ids, dataArr: _this.tableData});
            _this.$message ({
              showClose: true,
              message: res.msg,
              type: 'success'
            });
          } else {
            _this.$message ({
              showClose: true,
              message: res.msg,
              type: 'warning'
            });
          }
        }).catch (function  (error) {
          throw new Error (error);
        });
      },
      /**
       * 分页数改变
       */
      handleSizeChange: function  (pageSize) {
        this.pagination.pageSize = pageSize;
        this.getData ();
      },
      /**
       * 当前页面改变
       * @param currentPage
       */
      handleCurrentChange: function  (currentPage) {
        this.pagination.currentPage = currentPage;
        this.getData ();
      },
      tableRowClassName ({row, rowIndex}) {
        if  (rowIndex === 1) {
          return 'warning-row'
        } else if  (rowIndex === 3) {
          return 'success-row'
        }
        return ''
      },
      /**
       * 编辑单个
       * */
      handleEditItem (index, row) {
        this.$router.push ({
          name: 'TimedFreightTempletEditor',
          params: {
            id: row.id,
            methodType: this.constant.EDITORMETHOD
          }
        })
      },
      /**
       * 添加单个
       */
      handleAddItem: function  () {
        this.$router.push ({
          name: 'TimedFreightTempletEditor',
          params: {
            methodType: this.constant.ADDMETHOD
          }
        })
      },
      /**
       * 删除单个
       * @param index
       * @param row
       */
      handleDeleteItem (index, row) {
        let _this = this;
        let _id = row.id;
        this.$confirm ('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then ( () => {
          _this.delData ({id: _id});
        }).catch ( () => {
          this.$message ({
            type: 'info',
            message: '已取消该操作'
          })
        })
      },
      /**
       * 启用单个
       * @param index
       * @param row
       */
      handleStartUsingItem (index, row) {
        let _this = this;
        let _id = row.id;
        this.$confirm ('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then ( () => {
          _this.startUsingData ({id: _id});
        }).catch ( () => {
          this.$message ({
            type: 'info',
            message: '已取消该操作'
          })
        })
      },
      /**
       * 停用单个
       * @param index
       * @param row
       */
      handleBlockUpItem (index, row) {
        let _this = this;
        let _id = row.id;
        this.$confirm ('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then ( () => {
          _this.blockUpData ({id: _id});
        }).catch ( () => {
          this.$message ({
            type: 'info',
            message: '已取消该操作'
          })
        })
      },
      /**
       * 数据刷新
       */
      handleRefresh: function  () {
        this.getData ();
        this.$message ({
          showClose: true,
          message: '刷新成功',
          type: 'success'
        });
      },
      /**
       * 批量删除
       */
      handleDelete: function  () {
        let _this = this;
        let arr = [];
        if  (this.multipleSelection.length <= 0) {
          _this.$message ({
            showClose: true,
            message: '暂无选中',
            type: 'warning'
          });
        }
        for  (var i = 0; i < this.multipleSelection.length; i++) {
          arr.push (this.multipleSelection[i].id);
        }
        this.$confirm ('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then ( () => {
          _this.delData ({id: arr.join (',')});
        }).catch ( () => {
          this.$message ({
            type: 'info',
            message: '已取消该操作'
          })
        })
      },
      /**
       * 批量停用
       */
      handleBlockUp: function  () {
        let _this = this;
        let arr = [];
        if  (this.multipleSelection.length <= 0) {
          _this.$message ({
            showClose: true,
            message: '暂无选中',
            type: 'warning'
          });
        }
        for  (var i = 0; i < this.multipleSelection.length; i++) {
          arr.push (this.multipleSelection[i].id);
        }
        this.$confirm ('此操作将停用该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then ( () => {
          _this.blockUpData ({id: arr.join (',')});
        }).catch ( () => {
          this.$message ({
            type: 'info',
            message: '已取消该操作'
          })
        })
      },
      /**
       * 批量启用
       */
      handleStartUsing: function  () {
        let _this = this;
        let arr = [];
        if  (this.multipleSelection.length <= 0) {
          _this.$message ({
            showClose: true,
            message: '暂无选中',
            type: 'warning'
          });
        }
        for  (var i = 0; i < this.multipleSelection.length; i++) {
          arr.push (this.multipleSelection[i].id);
        }
        this.$confirm ('此操作将停用该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then ( () => {
          _this.startUsingData ({id: arr.join (',')});
        }).catch ( () => {
          this.$message ({
            type: 'info',
            message: '已取消该操作'
          })
        })
      },
      /**
       * 表格选中状态记录
       * @param val
       */
      handleSelectionChange (val) {
        this.multipleSelection = val;
      }
    },
    data () {
      return {
        tableData: [
          {
            id: 4,                //类型：Number  必有字段  备注：无
            name: "name",                //类型：String  必有字段  备注：模板名
            during: "mock",                //类型：String  必有字段  备注：时间段、分钟
            content: "mock",                //类型：String  必有字段  备注：内容
            status: 0,                //类型：Number  必有字段  备注：1启用，0禁用
            sun: "1.00",                //类型：String  必有字段  备注：星期天基本费用元/小时
            mon: "1.00",                //类型：String  必有字段  备注：星期一
            tue: "2.00",                //类型：String  必有字段  备注：星期二
            wed: "1.00",                //类型：String  必有字段  备注：星期三
            thu: "1.00",                //类型：String  必有字段  备注：星期四
            fri: "1.00",                //类型：String  必有字段  备注：星期五
            sat: "1.00",                //类型：String  必有字段  备注：星期六
            type: "mock",                //类型：String  必有字段  备注：0，普通；1，自定义
            fixed_price: "mock"                //类型：String  必有字段  备注：普通价格
          },
        ],
        multipleSelection: [],
        pagination: {
          total: 5,
          currentPage: 1,
          pageSize: 10,
          pageSizes: [5, 10, 20, 25, 30, 50, 110],
        },
      }
    },
  }
</script>

<style scoped>
  .el-container {
    display: block;
  }

  .el-table, .el-row {
    width: 98% !important;
    margin: 15px auto;
  }

  .el-pagination {
    text-align: center;
    margin: 15px 0;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }

  .tag-item{
    margin: 2px 0;
  }
</style>
